<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>日志</title>
    <link rel="stylesheet" th:href="@{/static/css/common.css}" />
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/bootstrap-theme.css}"/>
    <script type="text/javascript" th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="row">
    <div id="home_left" class="col-sm-2" th:insert="~{home :: home_left}">
    </div>
    <div class="col-sm-9">
        <span class="label label-primary">当前任务: [[${name}]]</span>
        <div id="log" class="log">
            <span></span><br>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    var pointer = -1;
    var isSend = false;
    var rows = 0;

    $(document).ready(function () {
        var int = self.setInterval("loopGetLog()", 1000);
    });

    function loopGetLog() {
        if (isSend || pointer == -1) {
            getLog();
        }
        isSend = false;
    }

    function getLog() {

        var name = [[${name}]];
        console.log(name)
        $.ajax({
            url: "http://localhost:9200/logInfo?name=" + name + "&pointer=" + pointer, //请求路径
            type: "GET", //请求方式
            dataType: "json",//设置接受到的响应数据的格式
            //回调函数
            success: function (data) {
                if (data) {
                    if (data.content && data.content.length > 0) {
                        var log = '';
                        for (var value of data.content) {
                            log = log + '<p id="' + rows + '">' + (rows + 1) + ' ' + value + '</p>';
                            rows = rows + 1;

                            //如果当前页面日志条数大于500，就从上往下依次删除，最多只保留500条日志
                            if (rows >= 500) {
                                var obj = document.getElementById(rows - 500);
                                $(obj).remove();
                            }
                        }

                        $('#log').append(log);
                    }

                    if (data.pointer) {
                        pointer = data.pointer;
                        console.log(data.pointer);
                    }
                }
                isSend = true;
            },
            error: function () {
                isSend = true;
                console.log("采集日志失败...")
            }
        })
    }
</script>
</html>